<template>

	<view class="cate-contaienr">
		<!-- 左侧 一级分类 -->
		<scroll-view class="cate-left" :scroll-y="true">
			<text class="cate-left-item" :class="{ selected: curIndex == index }" v-for="(item, index) in list" :key="index"
				@click="handleSelected(index)">{{ item.name }}</text>
		</scroll-view>
		<!-- 右侧 二级分类 -->
		<scroll-view class="cate-right" :scroll-y="true">
			<!-- 判断二级分类是否存在 -->
			<view v-if="list[curIndex]" class="cate-right-list">
				<view class="cate-right-item" v-for="(item, idx) in list[curIndex].children" :key="idx"
					@click="handleCateClick(item.category_id)">
					<image v-if="item.image" class="image" mode="widthFix" :src="item.image.preview_url"></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</scroll-view>
	</view>

</template>

<script>
	// 导入网络请求函数
	import request from '@/utils/request';

	export default {
		// 页面数据
		data() {
			return {
				// 一级分类列表
				list: [],
				// 当前页面选中一级分类（默认选中第一个）
				curIndex: 0,
			};
		},
		onLoad(options) {
			// 发起获取分类数据请求
			this.getCategoryData()
		},
		methods: {
			// 获取分类数据
			async getCategoryData() {
				console.log('获取分类页数据')
				const categoryPageRes = await request.get('/category/list')
				console.log('categoryPageRes', categoryPageRes)
				// 设置页面数据
				this.list = categoryPageRes.data.list
			},
			// 设置一级导航选中状态
			handleSelected(index) {
				this.curIndex = index
			},
			// 二级导航点击事件处理
			handleCateClick(id) {
				console.log('二级分类id', id)
				// 两种导航（页面跳转）：tab页面、普通页面
				uni.navigateTo({
					url: `/pages/goods/list?categoryId=${id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.cate-contaienr {
		display: flex;

		.cate-left {
			min-width: 220rpx;
			max-width: 220rpx;

			.cate-left-item {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 90rpx;
				font-size: 26rpx;
			}

			.selected {
				background-color: white;
				color: red;
			}
		}

		.cate-right {

			.cate-right-list {
				display: flex;
				flex-wrap: wrap;

				.cate-right-item {
					width: 33.33%;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 16rpx;
					font-size: 26rpx;

					.image {
						width: 100%;
						margin-bottom: 8rpx;
					}
				}
			}
		}
	}
</style>